<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="col-title-box">
        <div class="col-title">案 号 {{ caseInfo.caseNumber }} [创建时间: {{ caseInfo.startDate }} 到期时间: {{ caseInfo.endDate
        }}]
        </div>
        <el-divider direction="vertical"></el-divider>
        <el-button v-if="showCaseInfo" size="mini" type="text" @click="showCaseInfo = !showCaseInfo">收起</el-button>
        <el-button v-else size="mini" type="text" @click="showCaseInfo = !showCaseInfo">展开</el-button>
      </div>
      <el-descriptions v-if="showCaseInfo" :column="3" size="small" border>
        <el-descriptions-item label="所属机构">{{ caseInfo.deptName }}</el-descriptions-item>
        <el-descriptions-item label="标的金额">{{ caseInfo.caseAmount }} 元</el-descriptions-item>
        <el-descriptions-item label="所处节点">{{ caseStageMap[caseInfo.caseStage] }} {{ flagMap[caseInfo.flag] }}</el-descriptions-item>
        <el-descriptions-item label="调解员">{{ caseInfo.mediatorName }}</el-descriptions-item>
        <el-descriptions-item label="案由">{{ caseInfo.reason }}</el-descriptions-item>
        <el-descriptions-item label="所属地">{{ caseInfo.filingAddress }}</el-descriptions-item>
        <el-descriptions-item label="诉求">{{ caseInfo.demands }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="col-title-box">
        <div class="col-title">原 告 {{ yuanGaoList.length }} 人</div>
        <el-divider direction="vertical"></el-divider>
        <el-button v-if="showYuanGao" size="mini" type="text" @click="showYuanGao = !showYuanGao">收起</el-button>
        <el-button v-else size="mini" type="text" @click="showYuanGao = !showYuanGao">展开</el-button>
      </div>
      <el-table v-if="showYuanGao" :data="yuanGaoList" border style="width: 100%">
        <el-table-column prop="userName" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="userType" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="contactPhone" label="联系方式" align="center">
        </el-table-column>

      </el-table>

    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="col-title-box">
        <div class="col-title">被 告 {{ beiGaoList.length }} 人</div>
        <el-divider direction="vertical"></el-divider>
        <el-button v-if="showBeiGao" size="mini" type="text" @click="showBeiGao = !showBeiGao">收起</el-button>
        <el-button v-else size="mini" type="text" @click="showBeiGao = !showBeiGao">展开</el-button>
      </div>
      <el-table v-if="showBeiGao" :data="beiGaoList" border style="width: 100%">

        <el-table-column prop="userName" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="userType" label="类型" align="center">
        </el-table-column>
        <el-table-column prop="contactPhone" label="联系方式" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" v-if="caseInfo.flag != '03'" width="300px">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-headset" :disabled="callBtnStatus" size="mini"
              @click="callphone(scope.row)">呼叫</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRecord(scope.row)">添加记录</el-button>
            <el-button type="primary" icon="el-icon-message" size="mini" @click="sendMsg(scope.row)">发送信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px;">
      <div slot="header" class="col-title-box">
        <div class="col-title">沟通记录</div>
        <el-divider direction="vertical"></el-divider>
        <el-button v-if="showRecord" size="mini" type="text" @click="showRecord = !showRecord">收起</el-button>
        <el-button v-else size="mini" type="text" @click="showRecord = !showRecord">展开</el-button>
      </div>
      <el-table v-if="showRecord" :data="recordList" border style="width: 100%">
        <el-table-column prop="createTime" label="联系时间" width="160" align="center">
        </el-table-column>
        <el-table-column prop="targetName" label="沟通对象" width="120" align="center">
        </el-table-column>
        <el-table-column prop="targetPhone" label="电话" width="120" align="center">
        </el-table-column>
        <el-table-column prop="callState" label="电话状态" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ caseCallStateMap[scope.row.callState] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="communicateState" label="沟通结果" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ cateCommunicateStateMap[scope.row.communicateState] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mediationNote" label="调解方案" align="center">
        </el-table-column>
        <el-table-column prop="note" label="备注" align="center">
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="沟通记录" :visible.sync="recordVisible" width="50%" :show-close="false" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="recordForm" ref="recordForm" :rules="recordRules" label-width="100px">
        <el-form-item label="沟通对象">
          <div>{{ recordForm.targetName }} {{ recordForm.targetPhone }}</div>
        </el-form-item>
        <el-form-item label="电话状态">
          <el-select v-model="recordForm.callState" placeholder="请选择电话状态" style="width: 100%;">
            <el-option v-for="dict in dict.type.case_call_state" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="沟通结果">
          <el-select v-model="recordForm.communicateState" placeholder="请选择沟通结果" style="width: 100%;">
            <el-option v-for="dict in dict.type.cate_communicate_state" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="解决方案">
          <el-input type="textarea" v-model="recordForm.mediationNote" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="recordForm.note" placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitRecord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCaseInfo } from "@/api/case/info"
import { listCaseUser } from "@/api/case/user"
import { addCaseRecord, listCaseRecord } from "@/api/case/record"
import { EventBus } from "@/utils/event-bus";
export default {
  name: '',
  dicts: ['case_call_state', 'cate_communicate_state', 'case_user_type', 'case_stage', 'case_stage_flag'],
  data() {
    return {
      callBtnStatus: false,
      showCaseInfo: true,
      showYuanGao: true,
      showBeiGao: true,
      showRecord: true,
      caseId: '',
      caseInfo: {},
      yuanGaoList: [],
      beiGaoList: [],
      recordList: [],
      recordVisible: false,
      recordForm: {},
      recordRules: {

      },
      caseCallStateMap: {},
      cateCommunicateStateMap: {},
      caseUserTypeMap: {},
      caseStageMap: {},
      flagMap: {},
    }
  },
  created() {
    this.caseId = this.$route.query.caseId
    this.loadCaseInfo()
    this.loadCaseUser()
    this.loadRecord()
    EventBus.$on('callBtn', (btnstatus) => {
      console.log('page btn status', btnstatus);
      this.callBtnStatus = btnstatus
    })
    console.log(localStorage.getItem('callBtn'));

    this.callBtnStatus = localStorage.getItem('callBtn') == 1
    // console.log('callBtnStatus', this.callBtnStatus);

  },
  beforeDestroy() {
    EventBus.$off('callBtn', {})
  },
  methods: {
    initMap() {
      let map = {}
      for (let i = 0; i < this.dict.type.case_call_state.length; i++) {
        const dict = this.dict.type.case_call_state[i];
        map[dict.value] = dict.label
      }
      let map2 = {}
      for (let i = 0; i < this.dict.type.cate_communicate_state.length; i++) {
        const dict = this.dict.type.cate_communicate_state[i];
        map2[dict.value] = dict.label
      }
      let map3 = {}
      for (let i = 0; i < this.dict.type.case_user_type.length; i++) {
        const dict = this.dict.type.case_user_type[i];
        map3[dict.value] = dict.label
      }

       let map4 = {}
      for (let i = 0; i < this.dict.type.case_stage.length; i++) {
        const dict = this.dict.type.case_stage[i];
        map4[dict.value] = dict.label
      }

       let map5 = {}
      for (let i = 0; i < this.dict.type.case_stage_flag.length; i++) {
        const dict = this.dict.type.case_stage_flag[i];
        map5[dict.value] = dict.label
      }
      this.caseCallStateMap = map
      this.cateCommunicateStateMap = map2
      this.caseUserTypeMap = map3
      this.caseStageMap = map4
      this.flagMap = map5
    },
    loadCaseInfo() {
      getCaseInfo(this.caseId).then(res => {
        this.caseInfo = res.data
      })
    },
    loadCaseUser() {
      listCaseUser({
        caseId: this.caseId
      }).then(res => {
        const lits = res.rows
        this.yuanGaoList = []
        this.beiGaoList = []
        for (let i = 0; i < lits.length; i++) {
          const item = lits[i];
          if (item.caseUserRole == '01') {
            this.yuanGaoList.push(item)
          } else {
            this.beiGaoList.push(item)
          }
        }
      })
    },
    loadRecord() {
      listCaseRecord({
        caseId: this.caseId
      }).then(res => {
        this.recordList = res.rows
        this.initMap()
      })
    },


    addRecord(item) {
      this.initRecord()
      this.recordForm.targetName = item.userName
      this.recordForm.targetPhone = item.contactPhone
      this.recordVisible = true
    },
    initRecord() {
      this.recordForm = {
        caseId: this.caseId,
        mediatorId: this.caseInfo.mediatorId,
        targetName: '',
        targetPhone: '',
        callState: '',
        communicateState: '',
        mediationNote: '',
        note: ''
      }
    },
    onRecordClose(done) {
      this.initRecord()
      this.$refs.recordForm.resetFields()
      done()
    },
    onRecordCancel() {
      this.initRecord()
      this.$refs.recordForm.resetFields()
      this.recordVisible = false
    },
    submitRecord() {
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          addCaseRecord(this.recordForm).then(res => {
            this.onRecordCancel()
            this.loadRecord()
          })
        }
      })
    },
    callphone(item) {
      EventBus.$emit('PageMakeCall', item.contactPhone)
      this.addRecord(item)
    }
  }

}
</script>

<style scoped>
.col-title-box {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col-title {
  width: max-content;
  font-size: 16px;
  font-weight: bold;
  flex: 1;
}

/deep/ .el-card__header {
  background: #F4F4F4 !important;
}

.descriptions-label {
  width: 200px;
}
</style>